<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src\display\ScrollView.js - Go2d</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="icon" href="../assets/favicon.ico">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
                <h1><img src="../assets/css/logo.png" title="Go2d" width="117" height="52"></h1>
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.6.7</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
                    <h2 class="off-left">APIs</h2>
                    <div id="api-tabview" class="tabview">
                        <ul class="tabs">
                            <li><a href="#api-classes">Classes</a></li>
                            <li><a href="#api-modules">Modules</a></li>
                        </ul>
                
                        <div id="api-tabview-filter">
                            <input type="search" id="api-filter" placeholder="Type to filter APIs">
                        </div>
                
                        <div id="api-tabview-panel">
                            <ul id="api-classes" class="apis classes">
                                <li><a href="../classes/Class.html">Class</a></li>
                                <li><a href="../classes/Director.html">Director</a></li>
                                <li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
                                <li><a href="../classes/Ease.html">Ease</a></li>
                                <li><a href="../classes/Event.html">Event</a></li>
                                <li><a href="../classes/EventEmitter.html">EventEmitter</a></li>
                                <li><a href="../classes/go2d.html">go2d</a></li>
                                <li><a href="../classes/ImageView.html">ImageView</a></li>
                                <li><a href="../classes/Matrix.html">Matrix</a></li>
                                <li><a href="../classes/ObjectPool.html">ObjectPool</a></li>
                                <li><a href="../classes/ResizeEvent.html">ResizeEvent</a></li>
                                <li><a href="../classes/ResourceLoader.html">ResourceLoader</a></li>
                                <li><a href="../classes/ScrollEvent.html">ScrollEvent</a></li>
                                <li><a href="../classes/ScrollView.html">ScrollView</a></li>
                                <li><a href="../classes/Sprite.html">Sprite</a></li>
                                <li><a href="../classes/Stage.html">Stage</a></li>
                                <li><a href="../classes/TextField.html">TextField</a></li>
                                <li><a href="../classes/TouchEvent.html">TouchEvent</a></li>
                                <li><a href="../classes/Tween.html">Tween</a></li>
                                <li><a href="../classes/URLRequest.html">URLRequest</a></li>
                                <li><a href="../classes/Vector.html">Vector</a></li>
                            </ul>
                
                            <ul id="api-modules" class="apis modules">
                                <li><a href="../modules/go2d.html">go2d</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
                    Show:
                    <label for="api-show-inherited">
                        <input type="checkbox" id="api-show-inherited" checked>
                        Inherited
                    </label>
            
                    <label for="api-show-protected">
                        <input type="checkbox" id="api-show-protected">
                        Protected
                    </label>
            
                    <label for="api-show-private">
                        <input type="checkbox" id="api-show-private">
                        Private
                    </label>
                    <label for="api-show-deprecated">
                        <input type="checkbox" id="api-show-deprecated">
                        Deprecated
                    </label>
            
                </div>
            
            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
<h1 class="file-heading">File: src\display\ScrollView.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * 滑动视图类，可以在该视图中显示超过视图大小的显示对象，并可以通过滑动来显示内容视图的不同部分。
 * @author Lanfei
 * @class ScrollView
 * @extends Sprite
 * @todo 嵌套优化
 * @todo touchcancel
 *
 * @constructor
 * @param {Sprite} content 滚动视图的内容对象
 */
var ScrollView = go2d.ScrollView = Sprite.extend({
	__init: function(content) {
		this._super();

		/**
		 * 内容对象
		 * @protected
		 * @property _content
		 * @type Sprite
		 */
		this._content = null;
		this._scrollPos = new Vector();
		this._initTouchEvent();
		this.setContent(content);

		/**
		 * 纵向滑动距离
		 * @property scrollTop
		 * @type number
		 * @default 0
		 */
		Object.defineProperty(this, &#x27;scrollTop&#x27;, {
			set: function(scrollTop) {
				this.scrollTo(this.scrollLeft, scrollTop);
			},
			get: function() {
				return this._scrollPos.y;
			}
		});

		/**
		 * 横向滑动距离
		 * @property scrollLeft
		 * @type number
		 * @default 0
		 */
		Object.defineProperty(this, &#x27;scrollLeft&#x27;, {
			set: function(scrollLeft) {
				this.scrollTo(scrollLeft, this.scrollTop);
			},
			get: function() {
				return this._scrollPos.x;
			}
		});
	},
	_initTouchEvent: function() {
		var speed,
			lastTime,
			lastTouch,
			friction = 0.9;
		this.on({
			touchmove: function(e) {
				var now = +new Date();
				if (lastTime) {
					var offsetX = lastTouch.x - e.globalX,
						offsetY = lastTouch.y - e.globalY,
						offsetTime = now - lastTime;
					this.scrollBy(offsetX, offsetY);
					speed = new Vector(offsetX / offsetTime, offsetY / offsetTime);
				}
				lastTime = now;
				lastTouch = new Vector(e.globalX, e.globalY);
			},
			touchend: function() {
				lastTime = lastTouch = null;
			},
			step: function(deltaTime) {
				if (speed &amp;&amp; !lastTime) {
					var offsetX = speed.x * deltaTime,
						offsetY = speed.y * deltaTime;
					speed.x *= friction;
					speed.y *= friction;
					this.scrollBy(offsetX, offsetY);
					if (Math.sqrt(offsetX * offsetX + offsetY * offsetY) &lt; 1) {
						speed = null;
					}
				}
			}
		});
	},
	getChildTransform: function(child) {
		return child.getTransform().translate(this._scrollPos.clone().negate());
	},
	/**
	 * 在原有基础上滑动指定距离
	 * @function scrollBy
	 * @param {number} x 水平滑动距离
	 * @param {number} y 垂直滑动距离
	 * @return {this}
	 */
	scrollBy: function(x, y) {
		return this.scrollTo(this.scrollLeft + x, this.scrollTop + y);
	},
	/**
	 * 设置滑动距离
	 * @function scrollTo
	 * @param {number} x 水平滑动距离
	 * @param {number} y 垂直滑动距离
	 * @return {this}
	 */
	scrollTo: function(x, y) {
		var content = this.getContent();
		if (!content) {
			return;
		}

		var oldTop = this._scrollPos.y,
			oldLeft = this._scrollPos.x,
			newTop = Math.max(0, Math.min(Math.round(y), content.height - this.height)),
			newLeft = Math.max(0, Math.min(Math.round(x), content.width - this.width));
		if (newTop === oldTop &amp;&amp; newLeft === oldLeft) {
			return;
		}

		/**
		 * 滑动距离变化事件
		 * @event scroll
		 * @param {ScrollEvent} event 滑动距离变化事件对象
		 */
		var event = new ScrollEvent({
			top: oldTop,
			left: oldLeft
		}, {
			top: newTop,
			left: newLeft
		});
		this.emit(&#x27;scroll&#x27;, event);
		if (!event.isDefaultPrevented()) {
			this._scrollPos.y = newTop;
			this._scrollPos.x = newLeft;
			this.update();
		}
		return this;
	},
	/**
	 * 设置滚动视图的内容对象
	 * @function setContent
	 * @param {Sprite} content 滚动视图的内容对象
	 * @return {this}
	 */
	setContent: function(content) {
		this.removeContent();
		if (content) {
			this._super.addChildAt.call(this, content);
		}
		return this;
	},
	/**
	 * 获取滚动视图的内容对象
	 * @function getContent
	 * @return {Sprite} content 滚动视图的内容对象
	 */
	getContent: function() {
		return this.getChildAt(0);
	},
	/**
	 * 移除滚动视图的内容对象
	 * @function removeContent
	 * @param {Boolean} cleanup 是否销毁内容对象
	 * @return {this}
	 */
	removeContent: function(cleanup) {
		this._super.removeAllChildren.call(this, cleanup);
		return this;
	},
	addChildAt: function(child) {
		this.setContent(child);
		console.info(&#x27;NotSupport: Please use &#x60;setConent&#x60; instead.&#x27;);
		return this;
	},
	removeChildAt: function(index, cleanup) {
		this.removeContent(cleanup);
		console.info(&#x27;NotSupport: Please use &#x60;removeConent&#x60; instead.&#x27;);
		return this;
	},
	removeAllChildren: function(cleanup) {
		this.removeContent(cleanup);
		console.info(&#x27;NotSupport: Please use &#x60;removeConent&#x60; instead.&#x27;);
		return this;
	}
});
    </pre>
</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
